<template>
  <div class="phone">
    <div class="ID">+86 <input type="text" placeholder="请输入手机"></div>
    <div class="pwd">
      <input type="text" placeholder="请输入验证码"> | 
      <button type="button">发送验证码</button>
    </div>
    <button type="button" class="btn">
      <router-link to="/mine">登录</router-link>
    </button>
    <div class="aside">
      <router-link to="/forget">忘记密码?</router-link> |
      <router-link to="/register">立即注册</router-link>
    </div>
    <div class="other">
      <p>使用以下方式快速登录</p>
      <div class="img"><img src="../../assets/img/mine/weibo.png" alt=""></div>
    </div>
  </div>
</template>
<script>
export default{
  name: ''
}
</script>
<style scoped lang="less">
  .phone{
    .ID{
      width: 80%;
      margin: 50px auto;
      border-bottom: 1px solid #666;
      input{
        width: 60%;
        height: 30px;
        border: none;
        outline: none;
        padding-left: 10px;
      }
    }
    .pwd{
      width: 80%;
      margin: 50px auto;
      border-bottom: 1px solid #666;
      input{
        width: 60%;
        height: 30px;
        border: none;
        outline: none;
        padding-left: 40px;
      }
      button{
        width: 24%;
        height: 30px;
        border: none;

      }
    }
    button.btn{
      display: block;
      width: 80%;
      height: 40px;
      margin: 20px auto 20px;
      font-size: 1.1em;
      background-color: #000;
      border: none;
      a{
        color: #fff;
      }
    }
    .aside{
      text-align: center;
      font-size: 0.9em;
      a{
        color: #444;
        margin: 0 16px;
      }
    }
    .other{
      text-align: center;
      margin: 50px 0 0;
      p{
        margin: 0;
        font-size: 0.9em;
      }
      .img{
        width: 40px;
        height: 40px;
        border: 1px solid #000;
        border-radius: 20px;
        margin: 20px auto;
        img{
          width: 30px;
          margin: 5px;
        }
      }
    }
  }
</style>